<template>
  <el-dialog :model-value="dialogData.isShow" title="翻译" @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" label-width="90px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="请选择要翻译成的语言" label-width="180px">
            <div style="margin-left: 50px">
              <el-checkbox  v-model="form.zh" label="中文"/>
              <el-checkbox  v-model="form.en" label="英文"/>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup lang="ts">
import {ElMessage, FormInstance} from "element-plus";
import {getCrawlerData, translationDataContent} from "@/api/app/crawlerData";
import {translationContent} from "@/api/app/translation";

const formRef = ref<FormInstance>()


const emits = defineEmits<{
  (event: 'refresh'): void
}>()

// 表单
let form: any = ref({
  id: null,
  zh: false,
  en: false,
  to: []
});


// 获取详情
const getDetails = (id: string) => {
  getCrawlerData(id).then(res => {
    form.value = Object.assign({}, form.value, res);
  })
}

// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null
})

// 打开弹框
const openTranslationDialog = async (id: string) => {
  dialogData.isShow = true;
  dialogData.title = '翻译';
  getDetails(id)
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  dialogData.id = null;
  form.value = {
    id: null,
    zh: false,
    en: false,
    to: []
  };
}
// 提交

const submit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid: any) => {
    if (valid) {
      console.log(form.value)
      if (form.value.zh && form.value.en) {
        form.value.to = 'zh_en'
      } else {
        if (form.value.zh) {
          form.value.to = 'zh'
        }
        if (form.value.en) {
          form.value.to = 'en'
        }
      }
      let data = form.value;
      if (data.id) {
        translationDataContent({...data}).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      }
    }
  })
}

defineExpose({
  openTranslationDialog,
});
</script>

<style scoped></style>
